<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
    <div id="app">
        <div>
            <div>
                <input type="text" placeholder="输入" v-model='inputValue' />
                <button @click="addTodo"> ADD</button>
            </div>
            <div>
                <ul>
                    <template v-if='todoList.length>0'>
                        <li v-for="todo of todoList" :key="todo.id" >
                            <input type="checkbox" :checked="todo.completed" @click="toggleTodo(todo.id)" />
                            <span :style="{
                                textDecoration:todo.completed ? 'line-through':''
                            }">{{todo.content}}</span>
                            <button @click="deleteTodo(todo.id)">del</button>
                        </li>
                    </template>
                    <template v-else>
                        <li>no data available</li>
                    </template>
                </ul>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        /**
         * 
         **/
        var vm = new Vue({
            el: '#app',
            data() {
                return {
                    // {
                    //     id: new Date(),
                    //     content: '',
                    //     completed: false
                    // }
                    todoList: [],
                    inputValue: ''
                }
            },
            computed: {

            },
            mounted() {

            },
            methods: {
                addTodo() {
                    const _inputValue = this.inputValue.trim();
                    if (_inputValue.length === 0) {
                        return
                    }
                    const hasThisContent = this.todoList.some(todo => todo.content === this.inputValue);
                    if (hasThisContent) {
                        alert("已存在")
                        return
                    }
                    this.todoList.push({
                        id: new Date().getTime(),
                        content: _inputValue,
                        completed: false
                    })
                    console.log(this.todoList)
                },
                deleteTodo(id) {
                    this.todoList = this.todoList.filter(todo => todo.id !== id)
                },
                toggleTodo(id) {
                    this.todoList = this.todoList.map(todo => {
                        if (todo.id == id) {
                            todo.completed = !todo.completed
                        };
                        return todo;
                    })
                }
            }
        })
    </script>
</body>

</html>